$(function () {
    //获取页面id
    var machineId = T.p("machineId");
    console.log("获取机器id:" + machineId);
    vm.p.machineId=machineId;
    var pageNum = T.p("pageNum");
    console.log("pageNum:" + pageNum);
    vm.p.pageNum=pageNum;

    //初始化时间
    var initStartTime = moment().startOf('day');
    var initEndTime = moment().endOf('day');
    vm.initDatePicker(initStartTime, initEndTime);

    vm.q.startTime = initStartTime.format('YYYY-MM-DD HH:mm:ss');
    vm.q.endTime = initEndTime.format('YYYY-MM-DD HH:mm:ss');
    vm.getColModel(machineId);
    console.log("q:" + JSON.stringify(vm.q));
    console.log("analyzeData:" + JSON.stringify(vm.analyzeData));

});


var vm = new Vue({

    el: '#rrapp',
    data: {
        q: {
            status: "",
            startTime: "",
            endTime: ""
        },
        p: {
            machineId: null,
            pageNum: null
        },
        caption: null,
        colModel: [],
        colName: [],
        showList: true,
        title: null,
        analyzeData: {}
    },
    methods: {
        query: function () {
            vm.reload();
        },
        reload: function (event) {
            vm.showList = true;
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {
                    'status': vm.q.status,
                    'startTime': vm.q.startTime,
                    'endTime': vm.q.endTime
                }
            }).trigger("reloadGrid");
        },
        getColModel: function (machineId) {
            $.get(baseURL + "machine/data/analyze/getColNamesAndModel/" + machineId, function (r) {
                if (r.code === 0) {
                    var jqGridEntity = r.jqGridEntity;
                    vm.colModel = jqGridEntity.colModelEntity;
                    vm.caption = jqGridEntity.machineEntity.name;
                    vm.initJqGridData(machineId);
                } else {
                    alert(r.msg);
                }
            });


        },
        initDatePicker: function (start, end) {

            $('#datetimes').daterangepicker({
                "showDropdowns": true,
                "timePicker": true,
                "timePicker24Hour": true,
                "timePickerSeconds": true,
                "showCustomRangeLabel": true,
                "startDate": start,
                "endDate": end,
                "opens": "center",
                "ranges": {
                    "最近1小时": [moment().subtract(1, 'hours'), moment()],
                    "今日": [moment().startOf('day'), moment().endOf('day')],
                    "昨日": [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    "最近7日": [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
                    "最近30日": [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')]
                },
                "locale": {
                    "format": "YYYY-MM-DD HH:mm:ss",
                    "applyLabel": '确定',
                    "cancelLabel": '取消',
                    "fromLabel": '起始时间',
                    "toLabel": '结束时间',
                    "customRangeLabel": '自定义',
                    "daysOfWeek": ['日', '一', '二', '三', '四', '五', '六'],
                    "monthNames": ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    "firstDay": 1
                }
            }, function (start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss') + ' (predefined range: ' + label + ')');
                vm.q.startTime = start.format('YYYY-MM-DD HH:mm:ss');
                vm.q.endTime = end.format('YYYY-MM-DD HH:mm:ss');
                console.log("vm中的q:" + JSON.stringify(vm.q));
            });
        },

        initJqGridData: function (machineId) {
            console.log("colModel:" + JSON.stringify(vm.colModel));
            $("#jqGrid").jqGrid({
                url: baseURL + 'machine/data/analyze',
                datatype: "json",
                mtype: "GET",
                postData: {
                    "machineId": machineId,
                    "startTime": vm.q.startTime,
                    "endTime": vm.q.endTime
                },
                caption: vm.caption + "-数据分析",
                colModel: vm.colModel,
                viewrecords: false,
                height: 50,
                autowidth: true,
                jsonReader: {
                    root: "analyzeData",
                    repeatitems: false
                },
                gridComplete: function () {
                    //隐藏grid底部滚动条
                    $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
                },
                loadComplete: function (xhr) {
                    if (xhr.code != 0) {
                        alert(xhr.msg);
                    } else {
                        vm.analyzeData = xhr.analyzeData[0];

                        console.log("analyzeData:" + JSON.stringify(vm.analyzeData));

                        // 基于准备好的dom，初始化echarts实例
                        var myChart1 = echarts.init(document.getElementById('charts1'));
                        var myChart2 = echarts.init(document.getElementById('charts2'));

                        var option1 = {
                            title: {
                                text: '工件合格/不合格',
                                // subtext: '纯属虚构',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['合格', '不合格']
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'pie',
                                    radius: '50%',
                                    center: ['50%', '50%'],
                                    data: [
                                        {value: vm.analyzeData['qualifiedCount'], name: '合格数'},
                                        {value: vm.analyzeData['disqualifiedCount'], name: '不合格数'}
                                    ],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        var option2 = {
                            title: {
                                text: '工件NG类型',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: vm.analyzeData['errorTypeNameList']
                            },
                            series: [
                                {
                                    name: '',
                                    type: 'pie',
                                    radius: '50%',
                                    center: ['50%', '50%'],
                                    data: vm.analyzeData['chartsDataList'],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };


                        // 使用刚指定的配置项和数据显示图表。
                        myChart1.setOption(option1);
                        myChart2.setOption(option2);
                    }
                }
            });
        },
        goBack: function () {
            console.log("返回机器列表")
            window.location.href = 'machine.html?machineId='+vm.p.machineId+'&pageNum='+vm.p.pageNum+'';
        }
    }
});








